<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted, computed } from 'vue';
import { Search, Filter, ArrowDown } from '@element-plus/icons-vue'

// 定义不同标签页的列配置
const contractFeeColumns = [
    {
        title: '客户简称',
        key: 'customerShortName',
        sortable: true,
    },
    {
        title: '客户编号',
        key: 'customerCode',
        sortable: true,
    },
    {
        title: '客户状态',
        key: 'customerStatus',
    },
    {
        title: '收费负责人',
        key: 'chargePerson',
    },
    {
        title: '账务会计',
        key: 'accountingClerk',
    },
    {
        title: '代账合同编号',
        key: 'agencyContractCode',
    },
    {
        title: '合同到期时间',
        key: 'contractExpiryTime',
        sortable: true,
    },
    {
        title: '月代理费',
        key: 'monthlyAgencyFee',
        sortable: true,
    },
    {
        title: '账本费及其他',
        key: 'ledgerFeeAndOthers',
    },
    {
        title: '开始收费月份',
        key: 'startChargeMonth',
        sortable: true,
    },
    {
        title: '已收费至',
        key: 'collectedAmount',
        sortable: true,
    },
    {
        title: '应收状态',
        key: 'contractStatus',
    },
    {
        title: '当前应收',
        key: 'uncollectedAmount',
        sortable: true,
    },
    {
        title: '收费情况',
        key: 'sfqk',
        sortable: true,
    },
    {
        title: '欠费/ 预收月份',
        key: 'qfysyf',
        sortable: true,
    },
    {
        title: '欠费金额',
        key: 'qfje',
        sortable: true,
    },
    {
        title: '预收金额',
        key: 'ysje',
        sortable: true,
    },
    {
        title: '收费周期',
        key: 'sfzq',
        sortable: true,
    },
    {
        title: '首次收费时间',
        key: 'scsfsj',
        sortable: true,
    },
    {
        title: '片区',
        key: 'pq',
        sortable: true,
    },
    {
        title: '所属部门',
        key: 'ssbm',
        sortable: true,
    },
    {
        title: '客户等级',
        key: 'khdj',
        sortable: true,
    },
    {
        title: '税务会计',
        key: 'swkj',
        sortable: true,
    },
    {
        title: '服务顾问',
        key: 'fwgw',
        sortable: true,
    },
    {
        title: '合同金额',
        key: 'htje',
        sortable: true,
    },
    {
        title: '总实收',
        key: 'zss',
        sortable: true,
    },
    {
        title: '总支出',
        key: 'zzc',
        sortable: true,
    },
    {
        title: '本月实收',
        key: 'byss',
        sortable: true,
    },
    {
        title: '本月支出',
        key: 'byzc',
        sortable: true,
    },
    {
        title: '增值税类型',
        key: 'zzslx',
        sortable: true,
    },
    {
        title: '备用编号',
        key: 'bybh',
        sortable: true,
    },
    {
        title: '服务产品',
        key: 'ffcp',
        sortable: true,
    },
    {
        title: '合同审核时间',
        key: 'htshsj',
        sortable: true,
    },
    {
        title: '财务审核时间',
        key: 'cwshsj',
        sortable: true,
    },
    {
        title: '原合同编号',
        key: 'yhtbh',
        sortable: true,
    },
    {
        title: '签单人',
        key: 'qdr',
        sortable: true,
    }
];

const contractServiceItemFeeColumns = [
    {
        title: '客户名称',
        key: 'customerName',
        sortable: true,
    },
    {
        title: '服务项名称',
        key: 'serviceItemName',
        sortable: true,
    },
    {
        title: '服务时间',
        key: 'serviceTime',
        sortable: true,
    },
    {
        title: '合同编号',
        key: 'contractCode',
        sortable: true,
    },
    {
        title: '服务项单位',
        key: 'serviceItemUnit',
    },
    {
        title: '回款计划时间',
        key: 'paymentPlanTime',
        sortable: true,
    },
    {
        title: '收款状态',
        key: 'collectionStatus',
    },
    {
        title: '服务项原价',
        key: 'serviceItemOriginalPrice',
        sortable: true,
    },
    {
        title: '折扣与减免',
        key: 'discountAndReduction',
    },
    {
        title: '实际单价',
        key: 'actualUnitPrice',
        sortable: true,
    },
    {
        title: '临时优惠',
        key: 'temporaryDiscount',
    },
    {
        title: '已登记收入',
        key: 'collectedAmount',
        sortable: true,
    },
    {
        title: '未登记收入',
        key: 'uncollectedAmount',
        sortable: true,
    },
    {
        title: '已审核收入',
        key: 'yshsr',
        sortable: true,
    },
    {
        title: '服务项收费周期',
        key: 'fwxsfzq',
        sortable: true,
    },
    {
        title: '催费时间',
        key: 'cftime',
        sortable: true,
    },
    {
        title: '合同生效时间',
        key: 'htsxtime',
        sortable: true,
    }
];

const orderFeeColumns = [
    {
        title: '客户简称',
        key: 'customerShortName',
        sortable: true,
    },
    {
        title: '服务项',
        key: 'serviceItem',
    },
    {
        title: '订单编号',
        key: 'orderCode',
        sortable: true,
    },
    {
        title: '签单人',
        key: 'orderSigner',
    },
    {
        title: '订单状态',
        key: 'orderStatus',
    },
    {
        title: '服务项收费状态',
        key: 'serviceItemCollectionStatus',
    },
    {
        title: '服务项金额',
        key: 'serviceItemAmount',
        sortable: true,
    },
    {
        title: '已收金额',
        key: 'collectedAmount',
        sortable: true,
    },
    {
        title: '未收金额',
        key: 'uncollectedAmount',
        sortable: true,
    },
    {
        title: '回款率',
        key: 'collectionRate',
        sortable: true,
    },
    {
        title: '总支出',
        key: 'totalExpenditure',
        sortable: true,
    },
    {
        title: '本月实收',
        key: 'monthlyIncome',
        sortable: true,
    },
    {
        title: '本月支出',
        key: 'byzc',
        sortable: true,
    },
];

const employeeFeeColumns = [
    {
        title: '员工/部门',
        key: 'employeeOrDepartment',
        align: 'left',
        fixed: 'left',
        width: 150
    },
    {
        title: '执行中的周期合同',
        children: [
            {
                title: '合同总金额',
                key: 'contractTotalAmount',
                sortable: true,
                width: 120
            },
            {
                title: '已审核收入',
                key: 'approvedIncome',
                sortable: true,
                width: 120
            },
            {
                title: '未收',
                key: 'uncollected',
                sortable: true,
                width: 100
            }
        ]
    },
    {
        title: '执行中的单次业务订单',
        children: [
            {
                title: '订单总金额',
                key: 'orderTotalAmount',
                sortable: true,
                width: 120
            },
            {
                title: '已审核收入',
                key: 'approvedIncomeOrder',
                sortable: true,
                width: 120
            },
            {
                title: '未收',
                key: 'uncollectedOrder',
                sortable: true,
                width: 100
            }
        ]
    }
];

const mockData = ref({
    contractFee: [],
    contractServiceItemFee: [],
    orderFee: [],
    employeeFee: [],
});
const loading = ref(true)
const activeName = ref('contractFee')
const columns = ref(contractFeeColumns);
const searchKeyword = ref('')
const includeEndedContract = ref(false)
const serviceAdvisorFilter = ref('')
const hideNoDataEmployee = ref(true)

// 合同收费进度筛选条件
const receivableStatus = ref('');
const serviceAdvisor = ref('');
const searchServiceAdvisor = ref('');
const signer = ref('');
const department = ref('');
const includeSubDepartment = ref(false);
const feeSituation = ref('');
const contractAuditTime = ref([]);
const financialAuditTime = ref([]);
const contractSignType = ref('');
const serviceProduct = ref('');
const customerStatus = ref('');
const feeCycle = ref('');
const firstFeeTime = ref([]);
const area = ref('');
const customerLevel = ref('');
const vatType = ref('');
const spareNo = ref('');

// 订单收费进度筛选条件
const orderChargeStatus = ref('');
const orderServiceItem = ref('');
const orderServiceAdvisor = ref('');
const orderSearchServiceAdvisor = ref('');
const orderSigner = ref('');
const orderDepartment = ref('');
const orderIncludeSubDepartment = ref(false);
const orderCustomerStatus = ref('');
const orderOrderStatus = ref('');
const orderSpareNo = ref('');
const orderAuditTime = ref([]);
const orderFinancialAuditTime = ref([]);

// 合同服务项收费进度筛选条件 - 高级筛选条件
const filterConditions = ref([{
    field: '',
    condition: '',
    value: ''
}]);

// 计算属性：根据搜索关键词和筛选条件过滤数据
const filteredData = computed(() => {
    let result = mockData.value[activeName.value] || [];

    if (activeName.value === 'contractFee') {
        // 应收状态筛选
        if (receivableStatus.value) {
            result = result.filter(item => item.contractStatus === receivableStatus.value);
        }
        // 服务顾问筛选
        if (serviceAdvisor.value) {
            result = result.filter(item => item.fwgw === serviceAdvisor.value);
        }
        if (searchServiceAdvisor.value) {
            result = result.filter(item => item.fwgw === searchServiceAdvisor.value);
        }
        // 签单人筛选
        if (signer.value) {
            result = result.filter(item => item.qdr === signer.value);
        }
        // 所属部门筛选
        if (department.value) {
            result = result.filter(item => item.ssbm === department.value);
        }
        // 收费情况筛选
        if (feeSituation.value) {
            result = result.filter(item => item.sfqk === feeSituation.value);
        }
        // 合同审核时间筛选
        if (contractAuditTime.value.length === 2) {
            result = result.filter(item => {
                const auditTime = new Date(item.htshsj);
                return auditTime >= new Date(contractAuditTime.value[0]) && auditTime <= new Date(contractAuditTime.value[1]);
            });
        }
        // 财务审核时间筛选
        if (financialAuditTime.value.length === 2) {
            result = result.filter(item => {
                const auditTime = new Date(item.cwshsj);
                return auditTime >= new Date(financialAuditTime.value[0]) && auditTime <= new Date(financialAuditTime.value[1]);
            });
        }
        // 合同签约类型筛选
        if (contractSignType.value) {
            result = result.filter(item => item.contractSignType === contractSignType.value);
        }
        // 服务产品筛选
        if (serviceProduct.value) {
            result = result.filter(item => item.ffcp === serviceProduct.value);
        }
        // 客户状态筛选
        if (customerStatus.value) {
            result = result.filter(item => item.customerStatus === customerStatus.value);
        }
        // 收费周期筛选
        if (feeCycle.value) {
            result = result.filter(item => item.sfzq === feeCycle.value);
        }
        // 首次收费时间筛选
        if (firstFeeTime.value.length === 2) {
            result = result.filter(item => {
                const feeTime = new Date(item.scsfsj);
                return feeTime >= new Date(firstFeeTime.value[0]) && feeTime <= new Date(firstFeeTime.value[1]);
            });
        }
        // 片区筛选
        if (area.value) {
            result = result.filter(item => item.pq === area.value);
        }
        // 客户等级筛选
        if (customerLevel.value) {
            result = result.filter(item => item.khdj === customerLevel.value);
        }
        // 增值税类型筛选
        if (vatType.value) {
            result = result.filter(item => item.zzslx === vatType.value);
        }
        // 备用编号筛选
        if (spareNo.value) {
            result = result.filter(item => item.bybh === spareNo.value);
        }
    } else if (activeName.value === 'contractServiceItemFee') {
        // 应用高级筛选条件
        filterConditions.value.forEach(condition => {
            if (!condition.field || !condition.condition || !condition.value) return;

            result = result.filter(item => {
                const fieldValue = item[condition.field];
                if (fieldValue === undefined) return false;

                // 根据不同条件处理筛选逻辑
                switch (condition.condition) {
                    case 'eq':
                        return fieldValue === condition.value;
                    case 'contains':
                        return String(fieldValue).includes(condition.value);
                    case 'gt':
                        return Number(fieldValue) > Number(condition.value);
                    case 'lt':
                        return Number(fieldValue) < Number(condition.value);
                    case 'gte':
                        return Number(fieldValue) >= Number(condition.value);
                    case 'lte':
                        return Number(fieldValue) <= Number(condition.value);
                    default:
                        return false;
                }
            });
        });
    } else if (activeName.value === 'employeeFee') {
        if (serviceAdvisorFilter.value) {
            result = result.filter(item =>
                item.serviceAdvisor === serviceAdvisorFilter.value
            );
        }
        if (hideNoDataEmployee.value) {
            result = result.filter(item => {
                const hasContractData = Number(item.contractTotalAmount) > 0 ||
                    Number(item.approvedIncome) > 0 ||
                    Number(item.uncollected) > 0;
                const hasOrderData = Number(item.orderTotalAmount) > 0 ||
                    Number(item.approvedIncomeOrder) > 0 ||
                    Number(item.uncollectedOrder) > 0;
                return hasContractData || hasOrderData;
            });
        }
        return result;
    } else if (activeName.value === 'orderFee') {
        // 收费状态筛选
        if (orderChargeStatus.value) {
            result = result.filter(item => item.serviceItemCollectionStatus === orderChargeStatus.value);
        }
        // 服务项筛选
        if (orderServiceItem.value) {
            result = result.filter(item => item.serviceItem === orderServiceItem.value);
        }
        // 服务顾问筛选
        if (orderServiceAdvisor.value) {
            result = result.filter(item => item.serviceAdvisor === orderServiceAdvisor.value);
        }
        if (orderSearchServiceAdvisor.value) {
            result = result.filter(item => item.serviceAdvisor === orderSearchServiceAdvisor.value);
        }
        // 签单人筛选
        if (orderSigner.value) {
            result = result.filter(item => item.orderSigner === orderSigner.value);
        }
        // 所属部门筛选
        if (orderDepartment.value) {
            result = result.filter(item => item.department === orderDepartment.value);
        }
        // 客户状态筛选
        if (orderCustomerStatus.value) {
            result = result.filter(item => item.customerStatus === orderCustomerStatus.value);
        }
        // 订单状态筛选
        if (orderOrderStatus.value) {
            result = result.filter(item => item.orderStatus === orderOrderStatus.value);
        }
        // 备用编号筛选
        if (orderSpareNo.value) {
            result = result.filter(item => item.spareNo === orderSpareNo.value);
        }
        // 订单审核时间筛选
        if (orderAuditTime.value.length === 2) {
            result = result.filter(item => {
                const auditTime = new Date(item.orderAuditTime);
                return auditTime >= new Date(orderAuditTime.value[0]) && auditTime <= new Date(orderAuditTime.value[1]);
            });
        }
        // 财务审核时间筛选
        if (orderFinancialAuditTime.value.length === 2) {
            result = result.filter(item => {
                const auditTime = new Date(item.financialAuditTime);
                return auditTime >= new Date(orderFinancialAuditTime.value[0]) && auditTime <= new Date(orderFinancialAuditTime.value[1]);
            });
        }
    }

    if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase();
        result = result.filter(item => {
            return (
                (item.customerShortName && item.customerShortName.toLowerCase().includes(keyword)) ||
                (item.customerCode && item.customerCode.toLowerCase().includes(keyword)) ||
                (item.orderCode && item.orderCode.toLowerCase().includes(keyword))
            );
        });
    }

    return result;
});

const handleClick = (tab, event) => {
    loading.value = true
    console.log(tab.paneName, "标签点击")
    switch (tab.paneName) {
        case 'contractFee':
            columns.value = contractFeeColumns;
            break;
        case 'contractServiceItemFee':
            columns.value = contractServiceItemFeeColumns;
            // 重置筛选条件
            filterConditions.value = [{ field: '', condition: '', value: '' }];
            break;
        case 'orderFee':
            columns.value = orderFeeColumns;
            break;
        case 'employeeFee':
            columns.value = employeeFeeColumns;
            break;
    }

    setTimeout(() => {
        loading.value = false
    }, 500)
}

const handleSearch = () => {
    console.log('搜索关键词:', searchKeyword.value);
}

const clearSearch = () => {
    searchKeyword.value = '';
}

// 合同服务项筛选相关方法
const addFilterCondition = () => {
    filterConditions.value.push({
        field: '',
        condition: '',
        value: ''
    });
};

const removeFilterCondition = (index) => {
    if (filterConditions.value.length <= 1) return; // 至少保留一个条件
    filterConditions.value.splice(index, 1);
};

const resetContractFilter = () => {
    receivableStatus.value = '';
    serviceAdvisor.value = '';
    searchServiceAdvisor.value = '';
    signer.value = '';
    department.value = '';
    includeSubDepartment.value = false;
    feeSituation.value = '';
    contractAuditTime.value = [];
    financialAuditTime.value = [];
    contractSignType.value = '';
    serviceProduct.value = '';
    customerStatus.value = '';
    feeCycle.value = '';
    firstFeeTime.value = [];
    area.value = '';
    customerLevel.value = '';
    vatType.value = '';
    spareNo.value = '';
}

// 订单筛选重置方法
const resetOrderFilter = () => {
    orderChargeStatus.value = '';
    orderServiceItem.value = '';
    orderServiceAdvisor.value = '';
    orderSearchServiceAdvisor.value = '';
    orderSigner.value = '';
    orderDepartment.value = '';
    orderIncludeSubDepartment.value = false;
    orderCustomerStatus.value = '';
    orderOrderStatus.value = '';
    orderSpareNo.value = '';
    orderAuditTime.value = [];
    orderFinancialAuditTime.value = [];
}

const resetServiceItemFilter = () => {
    filterConditions.value = [{ field: '', condition: '', value: '' }];
}

const resetEmployeeFilter = () => {
    serviceAdvisorFilter.value = '';
    hideNoDataEmployee.value = true;
}

const generateContractFeeData = () => {
    return [
        {
            customerShortName: 'ABC代账客户',
            customerCode: 'DZKH001',
            customerStatus: '正常',
            chargePerson: '张三',
            accountingClerk: '李四',
            agencyContractCode: 'DZHT2023001',
            contractExpiryTime: '2024-12-31',
            monthlyAgencyFee: '500',
            ledgerFeeAndOthers: '100',
            startChargeMonth: '2023-01',
            collectedAmount: '6000',
            uncollectedAmount: '0',
            contractStatus: '本期已收',
            sfqk: '已预收',
            qfysyf: '无',
            qfje: '0',
            ysje: '1000',
            sfzq: '每月收',
            scsfsj: '2023-01-15',
            pq: '南区',
            ssbm: '财务部',
            khdj: 'VIP',
            swkj: '赵六',
            fwgw: '张三',
            htje: '6000',
            zss: '6000',
            zzc: '1000',
            byss: '500',
            byzc: '100',
            zzslx: '一般纳税人',
            bybh: 'BY001',
            ffcp: '代账服务',
            htshsj: '2023-01-05',
            cwshsj: '2023-01-06',
            yhtbh: '无',
            qdr: '张三',
            contractSignType: '新签'
        },
        {
            customerShortName: 'XYZ企业',
            customerCode: 'DZKH002',
            customerStatus: '暂停',
            chargePerson: '王五',
            accountingClerk: '赵六',
            agencyContractCode: 'DZHT2023002',
            contractExpiryTime: '2024-06-30',
            monthlyAgencyFee: '800',
            ledgerFeeAndOthers: '150',
            startChargeMonth: '2023-03',
            collectedAmount: '4800',
            uncollectedAmount: '1600',
            contractStatus: '待收(欠)',
            sfqk: '已欠费',
            qfysyf: '2个月',
            qfje: '1600',
            ysje: '0',
            sfzq: '三个月收',
            scsfsj: '2023-03-20',
            pq: '北区',
            ssbm: '业务部',
            khdj: '普通',
            swkj: '孙七',
            fwgw: '王五',
            htje: '9600',
            zss: '4800',
            zzc: '1500',
            byss: '800',
            byzc: '150',
            zzslx: '小规模纳税人',
            bybh: 'BY002',
            ffcp: '财税咨询',
            htshsj: '2023-03-10',
            cwshsj: '2023-03-11',
            yhtbh: '无',
            qdr: '王五',
            contractSignType: '续签'
        },
    ];
}

const generateContractServiceItemFeeData = () => {
    return [
        {
            customerName: 'ABC综合服务客户',
            serviceItemName: '年度审计',
            serviceTime: '2023-01至2023-12',
            contractCode: 'HT2023003',
            serviceItemUnit: '次',
            paymentPlanTime: '2023-12-31',
            collectionStatus: '已收款',
            serviceItemOriginalPrice: '20000',
            discountAndReduction: '2000',
            actualUnitPrice: '18000',
            temporaryDiscount: '无',
            collectedAmount: '18000',
            uncollectedAmount: '0',
        },
        {
            customerName: 'DEF科技公司',
            serviceItemName: '税务筹划',
            serviceTime: '2023-04至2023-06',
            contractCode: 'HT2023004',
            serviceItemUnit: '项',
            paymentPlanTime: '2023-06-30',
            collectionStatus: '未收款',
            serviceItemOriginalPrice: '15000',
            discountAndReduction: '0',
            actualUnitPrice: '15000',
            temporaryDiscount: '无',
            collectedAmount: '0',
            uncollectedAmount: '15000',
        },
    ];
}

const generateOrderFeeData = () => {
    return [
        {
            customerShortName: 'MNO贸易公司',
            serviceItem: '工商注册',
            orderCode: 'DD2023001',
            orderSigner: '孙七',
            orderStatus: '已完成',
            serviceItemCollectionStatus: '已收款',
            serviceItemAmount: '3000',
            collectedAmount: '3000',
            uncollectedAmount: '0',
            collectionRate: '100%',
            totalExpenditure: '1000',
            monthlyIncome: '3000',
            serviceAdvisor: '张三',
            department: '业务部',
            customerStatus: '正常',
            spareNo: 'SP001',
            orderAuditTime: '2023-01-10',
            financialAuditTime: '2023-01-11'
        },
        {
            customerShortName: 'PQR餐饮企业',
            serviceItem: '商标注册',
            orderCode: 'DD2023002',
            orderSigner: '周八',
            orderStatus: '进行中',
            serviceItemCollectionStatus: '部分收款',
            serviceItemAmount: '2500',
            collectedAmount: '1500',
            uncollectedAmount: '1000',
            collectionRate: '60%',
            totalExpenditure: '800',
            monthlyIncome: '1500',
            serviceAdvisor: '李四',
            department: '业务部',
            customerStatus: '正常',
            spareNo: 'SP002',
            orderAuditTime: '2023-02-15',
            financialAuditTime: '2023-02-16'
        },
    ];
}

const generateEmployeeFeeData = () => {
    return [
        {
            employeeOrDepartment: '张三',
            serviceAdvisor: '张三',
            contractTotalAmount: '50000',
            approvedIncome: '30000',
            uncollected: '20000',
            orderTotalAmount: '15000',
            approvedIncomeOrder: '10000',
            uncollectedOrder: '5000'
        },
        {
            employeeOrDepartment: '李四',
            serviceAdvisor: '李四',
            contractTotalAmount: '30000',
            approvedIncome: '30000',
            uncollected: '0',
            orderTotalAmount: '8000',
            approvedIncomeOrder: '8000',
            uncollectedOrder: '0'
        },
        {
            employeeOrDepartment: '王五',
            serviceAdvisor: '王五',
            contractTotalAmount: '0',
            approvedIncome: '0',
            uncollected: '0',
            orderTotalAmount: '0',
            approvedIncomeOrder: '0',
            uncollectedOrder: '0'
        }
    ];
}

onMounted(() => {
    mockData.value = {
        contractFee: generateContractFeeData(),
        contractServiceItemFee: generateContractServiceItemFeeData(),
        orderFee: generateOrderFeeData(),
        employeeFee: generateEmployeeFeeData()
    };
    setTimeout(() => {
        loading.value = false
    }, 1000)
})
</script>

<template>
    <div class="fee-progress-page">
        <!-- 顶部筛选区域 -->
        <div class="top-filter">
            <div class="top-filter-left">
                <!-- 筛选弹窗 -->
                <stick-popup>
                    <template #show>
                        <div class="filter-btn">
                            <div class="filter-btn-label">筛选</div>
                            <div class="filter-btn-icon">
                                <Filter />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="filter-form-container">
                            <!-- 合同收费进度筛选 -->
                            <div v-if="activeName === 'contractFee'">
                                <el-form :model="filterForm" label-width="100px">
                                    <!-- 应收状态 -->
                                    <el-form-item label="应收状态">
                                        <div class="radio-group">
                                            <el-radio v-model="receivableStatus" label="待收">待收</el-radio>
                                            <el-radio v-model="receivableStatus" label="待收(欠)">待收(欠)</el-radio>
                                            <el-radio v-model="receivableStatus" label="本期已收">本期已收</el-radio>
                                            <el-radio v-model="receivableStatus" label="本期无应收">本期无应收</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 服务顾问 -->
                                    <el-form-item label="服务顾问">
                                        <el-input v-model="serviceAdvisor" placeholder="服务顾问" />
                                        <el-input v-model="searchServiceAdvisor" placeholder="搜索服务顾问"
                                            style="margin-top: 8px;" />
                                    </el-form-item>

                                    <!-- 签单人 -->
                                    <el-form-item label="签单人">
                                        <el-input v-model="signer" placeholder="搜索签单人" />
                                    </el-form-item>

                                    <!-- 所属部门 -->
                                    <el-form-item label="所属部门">
                                        <el-input v-model="department" placeholder="搜索所属部门" />
                                        <el-checkbox v-model="includeSubDepartment" label="部门包含下级"
                                            style="margin-top: 8px;" />
                                    </el-form-item>

                                    <!-- 收费情况 -->
                                    <el-form-item label="收费情况">
                                        <div class="radio-group">
                                            <el-radio v-model="feeSituation" label="已欠费">已欠费</el-radio>
                                            <el-radio v-model="feeSituation" label="当月已收">当月已收</el-radio>
                                            <el-radio v-model="feeSituation" label="已预收">已预收</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 合同审核时间 -->
                                    <el-form-item label="合同审核时间">
                                        <el-date-picker v-model="contractAuditTime" type="daterange" range-separator="到"
                                            start-placeholder="开始日期" end-placeholder="结束日期" />
                                    </el-form-item>

                                    <!-- 财务审核时间 -->
                                    <el-form-item label="财务审核时间">
                                        <el-date-picker v-model="financialAuditTime" type="daterange"
                                            range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期" />
                                    </el-form-item>

                                    <!-- 合同签约类型 -->
                                    <el-form-item label="合同签约类型">
                                        <div class="radio-group">
                                            <el-radio v-model="contractSignType" label="续签">续签</el-radio>
                                            <el-radio v-model="contractSignType" label="新签">新签</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 服务产品 -->
                                    <el-form-item label="服务产品">
                                        <el-input v-model="serviceProduct" placeholder="搜索服务产品" />
                                    </el-form-item>

                                    <!-- 客户状态 -->
                                    <el-form-item label="客户状态">
                                        <div class="radio-group">
                                            <el-radio v-model="customerStatus" label="正常">正常</el-radio>
                                            <el-radio v-model="customerStatus" label="暂停">暂停</el-radio>
                                            <el-radio v-model="customerStatus" label="流失">流失</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 收费周期 -->
                                    <el-form-item label="收费周期">
                                        <div class="radio-group">
                                            <el-radio v-model="feeCycle" label="每月收">每月收</el-radio>
                                            <el-radio v-model="feeCycle" label="三个月收">三个月收</el-radio>
                                            <el-radio v-model="feeCycle" label="半年收">半年收</el-radio>
                                            <el-radio v-model="feeCycle" label="一年收">一年收</el-radio>
                                            <el-radio v-model="feeCycle" label="一次性收">一次性收</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 首次收费时间 -->
                                    <el-form-item label="首次收费时间">
                                        <el-date-picker v-model="firstFeeTime" type="daterange" range-separator="到"
                                            start-placeholder="开始日期" end-placeholder="结束日期" />
                                    </el-form-item>

                                    <!-- 片区 -->
                                    <el-form-item label="片区">
                                        <el-input v-model="area" placeholder="搜索片区" />
                                    </el-form-item>

                                    <!-- 客户等级 -->
                                    <el-form-item label="客户等级">
                                        <el-input v-model="customerLevel" placeholder="搜索客户等级" />
                                    </el-form-item>

                                    <!-- 增值税类型 -->
                                    <el-form-item label="增值税类型">
                                        <div class="radio-group">
                                            <el-radio v-model="vatType" label="一般纳税人">一般纳税人</el-radio>
                                            <el-radio v-model="vatType" label="小规模纳税人">小规模纳税人</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 备用编号 -->
                                    <el-form-item label="备用编号">
                                        <el-input v-model="spareNo" placeholder="搜索备用编号" />
                                    </el-form-item>
                                </el-form>
                            </div>

                            <!-- 订单收费进度筛选 -->
                            <div v-else-if="activeName === 'orderFee'">
                                <el-form :model="filterForm" label-width="100px">
                                    <!-- 收费状态 -->
                                    <el-form-item label="收费状态">
                                        <div class="radio-group">
                                            <el-radio v-model="orderChargeStatus" label="已收款">已收</el-radio>
                                            <el-radio v-model="orderChargeStatus" label="未收款">未收</el-radio>
                                            <el-radio v-model="orderChargeStatus" label="部分收款">部分收款</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 服务项目 -->
                                    <el-form-item label="服务项目">
                                        <el-input v-model="orderServiceItem" placeholder="搜索服务项目" />
                                    </el-form-item>

                                    <!-- 服务顾问 -->
                                    <el-form-item label="服务顾问">
                                        <el-input v-model="orderServiceAdvisor" placeholder="服务顾问" />
                                        <el-input v-model="orderSearchServiceAdvisor" placeholder="搜索服务顾问"
                                            style="margin-top: 8px;" />
                                    </el-form-item>

                                    <!-- 签单人 -->
                                    <el-form-item label="签单人">
                                        <el-input v-model="orderSigner" placeholder="搜索签单人" />
                                    </el-form-item>

                                    <!-- 所属部门 -->
                                    <el-form-item label="所属部门">
                                        <el-input v-model="orderDepartment" placeholder="搜索所属部门" />
                                        <el-checkbox v-model="orderIncludeSubDepartment" label="部门包含下级"
                                            style="margin-top: 8px;" />
                                    </el-form-item>

                                    <!-- 客户状态 -->
                                    <el-form-item label="客户状态">
                                        <div class="radio-group">
                                            <el-radio v-model="orderCustomerStatus" label="正常">正常</el-radio>
                                            <el-radio v-model="orderCustomerStatus" label="暂停">暂停</el-radio>
                                            <el-radio v-model="orderCustomerStatus" label="流失">流失</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 订单状态 -->
                                    <el-form-item label="订单状态">
                                        <div class="radio-group">
                                            <el-radio v-model="orderOrderStatus" label="待审核">待审核</el-radio>
                                            <el-radio v-model="orderOrderStatus" label="执行中">执行中</el-radio>
                                            <el-radio v-model="orderOrderStatus" label="已结束">已结束</el-radio>
                                            <el-radio v-model="orderOrderStatus" label="已终止">已终止</el-radio>
                                        </div>
                                    </el-form-item>

                                    <!-- 备用编号 -->
                                    <el-form-item label="备用编号">
                                        <el-input v-model="orderSpareNo" placeholder="搜索备用编号" />
                                    </el-form-item>

                                    <!-- 订单审核时间 -->
                                    <el-form-item label="订单审核时间">
                                        <el-date-picker v-model="orderAuditTime" type="daterange" range-separator="到"
                                            start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                    </el-form-item>

                                    <!-- 财务审核时间 -->
                                    <el-form-item label="财务审核时间">
                                        <el-date-picker v-model="orderFinancialAuditTime" type="daterange"
                                            range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                    </el-form-item>
                                </el-form>
                            </div>

                            <!-- 合同服务项收费进度筛选 - 高级筛选 -->
                            <div v-else-if="activeName === 'contractServiceItemFee'">
                                <div class="advanced-filter">
                                    <h3>增加筛选条件</h3>
                                    <p class="filter-desc">满足以下所有条件</p>

                                    <div v-for="(condition, index) in filterConditions" :key="index" class="filter-row">
                                        <el-select v-model="condition.field" placeholder="选择搜索字段" class="filter-select"
                                            @change="condition.condition = '', condition.value = ''">
                                            <el-option label="客户名称" value="customerName" />
                                            <el-option label="服务项名称" value="serviceItemName" />
                                            <el-option label="服务时间" value="serviceTime" />
                                            <el-option label="合同编号" value="contractCode" />
                                            <el-option label="收款状态" value="collectionStatus" />
                                            <el-option label="服务项原价" value="serviceItemOriginalPrice" />
                                            <el-option label="实际单价" value="actualUnitPrice" />
                                            <el-option label="已登记收入" value="collectedAmount" />
                                            <el-option label="未登记收入" value="uncollectedAmount" />
                                        </el-select>

                                        <el-select v-model="condition.condition" placeholder="选择条件"
                                            class="filter-select" @change="condition.value = ''">
                                            <el-option label="等于" value="eq" />
                                            <el-option label="包含" value="contains" />
                                            <el-option label="大于" value="gt" />
                                            <el-option label="小于" value="lt" />
                                            <el-option label="大于等于" value="gte" />
                                            <el-option label="小于等于" value="lte" />
                                        </el-select>

                                        <el-input v-model="condition.value"
                                            :placeholder="condition.field ? '请输入搜索值' : '请先选择字段和条件'"
                                            class="filter-input" />

                                        <el-button type="text" icon="Delete" @click="removeFilterCondition(index)"
                                            :disabled="filterConditions.length <= 1">
                                            删除
                                        </el-button>
                                    </div>

                                    <el-button type="text" @click="addFilterCondition" class="add-condition-btn">
                                        + 新增条件
                                    </el-button>
                                </div>
                            </div>

                            <!-- 员工收费进度筛选 -->
                            <div v-else-if="activeName === 'employeeFee'">
                                <el-form :model="filterForm" label-width="100px">
                                    <!-- 服务顾问 -->
                                    <el-form-item label="服务顾问">
                                        <el-select v-model="serviceAdvisorFilter" placeholder="服务顾问">
                                            <el-option label="全部" value="" />
                                            <el-option label="张三" value="张三" />
                                            <el-option label="李四" value="李四" />
                                            <el-option label="王五" value="王五" />
                                        </el-select>
                                    </el-form-item>

                                    <!-- 隐藏无数据员工 -->
                                    <el-form-item>
                                        <el-checkbox v-model="hideNoDataEmployee" label="隐藏无数据员工" />
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </template>
                    <template #footer>
                        <div class="filter-actions">
                            <el-button type="text" @click="
                                activeName === 'contractFee' ? resetContractFilter() :
                                    activeName === 'orderFee' ? resetOrderFilter() :
                                        activeName === 'contractServiceItemFee' ? resetServiceItemFilter() :
                                            resetEmployeeFilter()
                                ">重置</el-button>
                            <el-button type="primary">确认</el-button>
                        </div>
                    </template>
                </stick-popup>

                <!-- 搜索框 -->
                <div class="search-box" v-if="activeName !== 'employeeFee'">
                    <el-input v-model="searchKeyword" placeholder="请输入客户简称或编号" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>

                <!-- 包含已结束合同复选框 -->
                <div class="filter-checkbox" v-if="activeName === 'contractFee'">
                    <el-checkbox v-model="includeEndedContract" label="包含已结束、已终止的合同" />
                </div>

                <!-- 员工收费进度特定筛选 -->
                <div v-if="activeName === 'employeeFee'" class="employee-specific-filter">
                    <el-select v-model="serviceAdvisorFilter" placeholder="服务顾问" class="service-advisor-select">
                        <el-option label="全部" value="" />
                        <el-option label="张三" value="张三" />
                        <el-option label="李四" value="李四" />
                        <el-option label="王五" value="王五" />
                    </el-select>
                    <el-checkbox v-model="hideNoDataEmployee" label="隐藏无数据员工" />
                </div>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="top-filter-right">
                <el-button type="primary">导出</el-button>
            </div>
        </div>

        <div class="table-area">
            <div class="table-area-tab">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="合同收费进度" name="contractFee"></el-tab-pane>
                    <el-tab-pane label="合同服务项收费进度" name="contractServiceItemFee"></el-tab-pane>
                    <el-tab-pane label="订单收费进度" name="orderFee"></el-tab-pane>
                    <el-tab-pane label="员工收费进度" name="employeeFee"></el-tab-pane>
                </el-tabs>
            </div>

            <div v-if="activeName === 'contractFee'" class="tip-info">
                提示：此处只统计代账客户的收费情况！
            </div>
            <div v-if="activeName === 'contractServiceItemFee'" class="tip-info">
                <span style="color: #f56c6c;">•</span> 数据更新时间：--
                <el-link type="primary" style="margin-left: 8px;">报表统计逻辑</el-link>
            </div>

            <div class="table-area-table">
                <el-table v-if="activeName === 'employeeFee'" :data="filteredData" :loading="loading" border
                    style="width: 100%">
                    <el-table-column prop="employeeOrDepartment" label="员工/部门" fixed="left" width="150">
                    </el-table-column>

                    <el-table-column label="执行中的周期合同">
                        <el-table-column prop="contractTotalAmount" label="合同总金额" width="120" sortable>
                        </el-table-column>
                        <el-table-column prop="approvedIncome" label="已审核收入" width="120" sortable>
                        </el-table-column>
                        <el-table-column prop="uncollected" label="未收" width="100" sortable>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="执行中的单次业务订单">
                        <el-table-column prop="orderTotalAmount" label="订单总金额" width="120" sortable>
                        </el-table-column>
                        <el-table-column prop="approvedIncomeOrder" label="已审核收入" width="120" sortable>
                        </el-table-column>
                        <el-table-column prop="uncollectedOrder" label="未收" width="100" sortable>
                        </el-table-column>
                    </el-table-column>
                </el-table>

                <my-table v-else :loading="loading" :columns="columns" :dataSource="filteredData" :showIndex="true"
                    :show-operation="false">
                </my-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.fee-progress-page {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-bottom: 20px;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;

    .top-filter-left {
        display: flex;
        align-items: center;
        gap: 15px;

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 15px;
            height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
        }

        .search-box {
            width: 300px;
        }

        .filter-checkbox {
            margin-left: 8px;
        }

        .employee-specific-filter {
            display: flex;
            align-items: center;
            gap: 15px;

            .service-advisor-select {
                width: 160px;
            }
        }
    }

    .top-filter-right {
        display: flex;
        gap: 10px;

        .btn-icon {
            margin-left: 5px;
            font-size: 14px;
        }
    }
}

.table-area {
    width: calc(100% - 40px);
    margin: 20px auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;

    .table-area-tab {
        margin-bottom: 16px;
    }

    .tip-info {
        margin-bottom: 16px;
        font-size: 13px;
        color: #606266;
    }

    .table-area-table {
        width: 100%;

    }
}

.filter-form-container {
    padding: 15px;
    width: 500px;

    .el-form-item {
        margin-bottom: 15px;
    }

    .radio-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .advanced-filter {
        margin-bottom: 20px;

        h3 {
            margin-bottom: 16px;
            font-size: 16px;
            font-weight: 600;
        }

        .filter-desc {
            margin-bottom: 16px;
            color: #666;
        }

        .filter-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;

            .filter-select {
                width: 150px;
            }

            .filter-input {
                flex: 1;
            }
        }

        .add-condition-btn {
            color: #409eff;
            margin-top: 8px;
        }
    }
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}
</style>